<template>
  <!-- 采购计划明细 -->
  <div class="header flex-c">
    <p style="margin-right: 20px">已添加产品：{{ currentData.skuType }}</p>
    <p>总数：{{ currentData.planAmt }}</p>
  </div>
  <div class="table-w">
    <a-table class="table-two-line show-border-table" ref="tableRef" :data="currentData.billItems" :scroll="{ y: '100%' }" size="mini" :pagination="false">
      <template #columns>
        <a-table-column data-index="sort" title="序号" :width="45" fixed="left">
          <template #cell="{ rowIndex }">
            <p>{{ rowIndex + 1 }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="shopName" title="店铺" :width="120" fixed="left">
          <template #cell="{ record }">
            <TextLimit :val="record.shopName" />
          </template>
        </a-table-column>
        <a-table-column data-index="img" title="图片" :width="60" fixed="left">
          <template #cell="{ record }">
            <ImgPopover :src="record.productImg">
              <template #con>
                <a-image width="40" height="40" fit="contain" :src="record.productImg" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column title="产品名称" :width="130" fixed="left">
          <template #cell="{ record }">
            <TextLimit :val="record.productName" :rows="1" />
          </template>
        </a-table-column>
        <a-table-column data-index="sku" title="SKU/类目" :width="130" fixed="left">
          <template #cell="{ record }">
            <ShowSpuDetailBySku :val="record.sku" :showLimit="true" :rows="1" />
            <p>{{ record.cateName || '--' }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="msku" title="MSKU/ASIN" :width="130" fixed="left">
          <template #cell="{ record }">
            <TextLimit :rows="1" :val="record.msku || '--'" />
            <TextLimit :rows="1" :val="record.asin || '--'" />
          </template>
        </a-table-column>
        <a-table-column data-index="space" title="SKU规格" :width="100">
          <template #cell="{ record }">
            <TextLimit :val="getProductSpecs(record)" />
          </template>
        </a-table-column>
        <a-table-column data-index="purchaseDeptName" title="采购部门" :width="100" />
        <a-table-column data-index="salesmanName" title="销售员" :width="70" />
        <a-table-column title="是否加急" :width="70">
          <template #cell="{ record }">
            <p>{{ record.urgent ? '加急' : '否' }}</p>
          </template>
        </a-table-column>
        <a-table-column title="计划交期" :width="100">
          <template #cell="{ record }">
            <p>{{ $setTime(record.gmtPlanDelivery, 'YYYY/MM/DD') }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="planAmt" title="计划量" :width="70" />
        <a-table-column data-index="purchaseRealAmt" title="采购量" :width="70" />
        <a-table-column data-index="purchaseStayAmt" title="待采购量" :width="70" />
        <a-table-column data-index="warehouseRealAmt" title="已入库数" :width="70" />
        <a-table-column data-index="cutoffAmt" title="截单量" :width="70" />
        <a-table-column title="截单原因" :width="80">
          <template #cell="{ record }">
            <TextLimit :val="record.cutoffMsg" />
          </template>
        </a-table-column>
        <a-table-column title="产品备注" :width="80">
          <template #cell="{ record }">
            <TextLimit :val="record.remark" />
          </template>
        </a-table-column>
        <a-table-column data-index="purchaseUname" title="采购负责人" :width="80" />
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { parseJson } from '@/utils'
  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
</script>
<style lang="less" scoped>
  .product-list-w {
    flex: 1;
    background-color: #fff;
    display: flex;
    padding: 0 20px;
    flex-direction: column;
    overflow: hidden;
  }
  .header {
    font-weight: bold;
    margin-bottom: 10px;
  }
  .table-w {
    flex: 1;
    overflow: hidden;
  }
</style>
